<style>
  .layui-form {
    margin-left: 15px;
  }
  .layui-form-select .layui-input {
    padding-right: 0
  }
</style>
<!--页面主要内容-->
<main class="lyear-layout-content">
  <div class="container-fluid p-t-15">
    
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">问答管理</a>
            <a><cite>分类管理</cite></cite></a>
          </span>
          <div class="card-toolbar d-flex flex-column flex-md-row">
            <div class="toolbar-btn-action">
              <button class="btn btn-success m-r-5 add" data-toggle="modal" data-target="#addCateModel"><i class="mdi mdi-plus" ></i> 新增分类</button>
              <!-- <a class="btn btn-success m-r-5 ajax-post confirm" target-form="ids"><i class="mdi mdi-check"></i> 启用</a>
              <a class="btn btn-warning m-r-5" href="#!"><i class="mdi mdi-block-helper"></i> 禁用</a> -->
              <!-- <a class="btn btn-danger"><i class="mdi mdi-window-close"></i> 删除分类</a> -->
            </div>
            
            <form class="layui-form" id="layui-form" method="get" role="form" style="display: flex;">
              <input type="hidden" name="action" value="search">
              <select name="search" lay-verify="">
                <option value="name">分类名称</option>
                <option value="id">分类 ID</option>
              </select>   
              <input type="text" name="title" placeholder="请选择搜索条件" autocomplete="off" class="layui-input">  
              <button class="layui-btn layui-btn-primary" type="submit">搜索</button>
            </form>
          </div>
          <div class="card-body">
            
            <div class="table-responsive">
              <table class="table table-bordered">
                <thead>
                  <tr>
                    <th>id</th>
                    <th>分类名称</th>
                    <th>帖子数量</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  {foreach $CateList as $item}
                  <tr>
                    <td>{$item.id}</td>
                    <td>{$item.name}</td>
                    <td>{$item.num}</td>
                    <td>
                      <div class="btn-group">
                        <button class="btn btn-xs btn-default edit" data-toggle="modal" data-target="#editCateModel"
                        data-id="{$item.id}"><i class="mdi mdi-pencil" data-toggle="tooltip" data-original-title="编辑" ></i></button>

                        <a class="btn btn-xs btn-default del" data-toggle="tooltip" data-id="{$item.id}"
                        data-original-title="删除"><i class="mdi mdi-window-close"></i></a>
                      </div>
                    </td>
                  </tr>
                  {/foreach}
                </tbody>
              </table>
            </div>
            
            {$CateList->render()}
          </div>
        </div>
      </div>
   
    </div>
  </div>
</main>
<!--End 页面主要内容-->

<!-- 添加模态框 -->
<div class="modal fade" id="addCateModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title" id="exampleModalLabel">添加分类</h6>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <button class="btn btn-outline-secondary" type="button">分类名称</button>
          </div>
          <input type="text" class="form-control" id="cateName" name="cateName" placeholder="请输入分类名称" aria-label="" aria-describedby="basic-addon1">
        </div>
        <p class="msg"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary save">保存</button>
      </div>
    </div>
  </div>
</div>
 
<!-- 编辑模态框 -->
<div class="modal fade" id="editCateModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title" id="exampleModalLabel">修改分类名称</h6>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <button class="btn btn-outline-secondary" type="button">分类名称</button>
          </div>
          <input type="text" class="form-control" id="cateName1" name="cateName1" placeholder="请输入分类名称" aria-label="" aria-describedby="basic-addon1">
        </div>
        <p class="msg"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary SaveEdit" data-id="">保存</button>
      </div>
    </div>
  </div>
</div>

<script>
  layui.use(['layer'], function () {
    var $ = layui.jquery,
      layer = layui.layer

    // 删除分类
    $('.del').click(function () {
      let id = $(this).data('id');
      console.log(id)
      layer.confirm('确定删除该分类？', { icon: 3, title: '提示' }, function (index) {
        // 发起请求
        $.ajax({
          type: 'post',
          url: `{:url('admin/cate/del')}`,
          data: {
            id
          },
          dataType: 'json',
          success: function (res) {
            if (res.code == 1) {
              layer.msg(res.msg, { icon: 1, time: 1500 }, function (index) {
                // location.href = res.url
                layer.close(index)
                location.reload()
              })
            } else {
              layer.msg(res.msg, { icon: 2, time: 1500 }, function (index) {
                layer.close(index)
                location.reload()
              })
            }
          }
        })
        layer.close(index)
      })
    })

    // 监听输入框值的变化
    $("#cateName").change(function() {
      let value = $(this).val();
      // console.log(value);
      $.ajax({
        type: 'post',
        url:  `{:url('admin/cate/index')}`,
        data: {
          value,
          action: 'InputChange'
        },
        dataType: 'json',
        success: function(res) {
          // console.log(res)
          if (res.code == 1) {
            $('.msg').text('提示：' + res.msg).css('color', 'blue')
          } else {
            $('.msg').text('警告：' + res.msg).css('color','red')
          }
        }
      })
    })

    // 添加分类
    $('.save').click(function() {
      let value = $("#cateName").val();
      console.log(value);
      if (value == null) {
        layer.msg('分类名称不能为空', { icon: 2, time: 1500 }, function (index) {
          layer.close(index)
        })
      }
      $.ajax({
        type: 'post',
        url:  `{:url('admin/cate/index')}`,
        data: {
          value,
          action: 'addCate'
        },
        dataType: 'json',
        success: function(res) {
          // console.log(res)
          if (res.code == 0) {
            layer.msg(res.msg, { icon: 2, time: 1500 }, function (index) {
              layer.close(index)
            })
          } else if (res.code == 1) {
            layer.msg(res.msg, { icon: 1, time: 1500 }, function (index) {
              layer.close(index)
              $('#addCateModel').modal('hide')
              location.href = res.url
            })
          }
        }
      })
    })

    // 编辑分类
    $('.edit').click(function() {
      let id = $(this).data('id');
      // console.log(id);
      $.ajax({
        type: 'post',
        url:  `{:url('admin/cate/edit')}`,
        data: {
          id,
          action: 'editCate'
        },
        dataType: 'json',
        success: function(res) {
          if (res.code == 0) {
            layer.msg(res.msg, { icon: 2, time: 1500 }, function (index) {
              layer.close(index)
              location.reload()
            })
          } else if (res.code == 1) {
            $('#cateName1').val(res.data.name)
            $('.SaveEdit').attr('id', res.data.id);
          }
        }
      })
    })

    // 确定编辑
    $('.SaveEdit').click(function() {
      let value = $("#cateName1").val()
      let id = $(this).attr('id')
      if (value == null) {
        layer.msg('分类名称不能为空', { icon: 2, time: 1500 }, function (index) {
          layer.close(index)
        })
      }
      $.ajax({
        type: 'post',
        url: `{:url('admin/cate/edit')}`,
        data: {
          id,
          value,
          action: 'SaveEdit'
        },
        dataType: 'json',
        success: function(res) {
          if (res.code == 0) {
            layer.msg(res.msg, { icon: 2, time: 1500 }, function (index) {
              layer.close(index)
            })
          } else if (res.code == 1) {
            layer.msg(res.msg, { icon: 1, time: 1500 }, function (index) {
              layer.close(index)
              $('#addCateModel').modal('hide')
              // location.href = res.url              
              location.reload()

            })
          }
        }
      })

    })

    $("#cateName1").change(function() {
      let value = $(this).val();
      // console.log(value);
      $.ajax({
        type: 'post',
        url:  `{:url('admin/cate/index')}`,
        data: {
          value,
          action: 'InputChange'
        },
        dataType: 'json',
        success: function(res) {
          // console.log(res)
          if (res.code == 1) {
            $('.msg').text('提示：' + res.msg).css('color', 'blue')
          } else {
            $('.msg').text('警告：' + res.msg).css('color','red')
          }
        }
      })
    })

  })

</script>